<template>
	<view>
		<view class="content">
			<z-paging ref="paging" v-model="tableData" :auto="true" @query="queryList">
				<template #top>
					<u-navbar :fixed="false" title="实验报告" :autoBack="true" :safeAreaInsetTop="true" leftIconColor="#fff"
						style="width: 100%;">
					</u-navbar>
					<view class="SearchBox">
						<u-search :showAction="true" v-model="filterConfig.SearchKey" searchIcon=" " shape="square"
							actionText="搜索" @search="OnSearch" @custom="OnSearch" :actionStyle="{color:'#fff'}"
							:animation="false">
						</u-search>
					</view>


					<view class="TabsBox">
						<m-scroll-tag @tabChange="tabsChange" :tagsList="tabList" bgColor="#52b583">
							<view slot="right">
								<view class="IconBoxs x-f" @click="openFilter">
									<uni-icons fontFamily="CustomFontPlatform"
										style="margin-left: 14px;font-weight: 600;" color="#818181"
										:size="20">{{$utils.toUniCode('&#xe6cb;')}}</uni-icons>
								</view>
							</view>
						</m-scroll-tag>
					</view>


					<!-- 温馨提示按钮 -->
					<m-drag-button :style="{ opacity: BtnShow ? 1 : 0, }" :isDock="true" :existTabBar="true"
						:initialBottom="160" @btnClick="openTipsBtn">
						<template #BtnContent>
							<!-- <u-icon name="plus" color="#fff" size="54rpx"></u-icon> -->

							<uni-icons fontFamily="CustomFontPlatform" color="#fff"
								size="50rpx">{{$utils.toUniCode('&#xec9f;')}}</uni-icons>
						</template>
					</m-drag-button>


					<!-- 新增按钮 -->
					<m-drag-button :style="{ opacity: BtnShow ? 1 : 0, }" :isDock="true" :existTabBar="true"
						:initialBottom="80" @btnClick="addTaskBtn">
						<template #BtnContent>
							<!-- <u-icon name="plus" color="#fff" size="54rpx"></u-icon> -->
							<uni-icons type="plusempty" color="#fff" size="50rpx"></uni-icons>

						</template>
					</m-drag-button>
				</template>



				<view class="lab-card" v-for="(item, index) in tableData" :key="index"
					@click="innerCellClick(item, index)">
					<!-- 顶部栏 -->
					<view class="lab-card__top">
						<view class="top-left">
							<text class="index">#{{ index + 1 }}</text>
							<text class="bill-no">{{ item.BillNO }}</text>
						</view>
						<text class="bill-date">{{ item.BillDate }}</text>
					</view>

					<!-- 产品信息 -->
					<view class="product-info">
						<text>
							产品：{{ item.ProductCode }} ｜ {{ item.ProductName }} ｜ {{ item.ProductSpec }}
						</text>
						<view class="x-f">
							<view>
								<text>送检数量：</text>
								<text>{{ item.BJNum }}</text>
							</view>
							<view style="margin-left: 20rpx;">
								<text>抽检数量：</text>
								<text>{{ item.CJNum }}</text>
							</view>
						</view>
					</view>

					<!-- 截止日期 -->
					<view v-if="item.TestEndTime" class="deadline-info">
						<text class="deadline-text">截止日期：{{ item.TestEndTime }}</text>
						<text class="deadline-status" :class="{ overdue: item.Delay > 0, normal: item.Delay <= 0 }">
							{{ item.Delay > 0 ? '超期 ' + item.Delay + ' 天' : '剩余 ' + Math.abs(item.Delay) + ' 天' }}
						</text>
					</view>

					<!-- 检测内容 -->
					<view class="content-list" v-if="item.Details.length">
						<view class="content-row" v-for="(row, rIdx) in item.Details" :key="rIdx">
							<text class="content-text">{{ rIdx + 1 }}. {{ row.LabTestPlanContent }}</text>
							<uni-icons fontFamily="CustomFontPlatform" class="content-icon"
								:color="backIconByType(row.SFJY).color" :size="14">
								{{ $utils.toUniCode(backIconByType(row.SFJY).icon) }}
							</uni-icons>
						</view>
					</view>

					<!-- 底部栏 -->
					<view class="card-footer">
						<text>负责人：</text>
						<text class="footer-name">{{ item.CuratorName }}</text>
					</view>
				</view>


			</z-paging>


			<!-- 筛选弹层 -->
			<uni-popup ref="filterPopup" type="right" background-color="#f8f8f8" borderRadius="20px 0 0 20px"
				:is-mask-click="true">
				<view class="filterPopup f-dc">
					<view :style="{paddingTop: pageConfig.safeTop + 'px'}" style="background-color: #fff;"></view>

					<!-- 内容区域 -->
					<view class="flex-auto">
						<!-- 基础信息分组 -->
						<view class="filter-group">
							<view class="filter-title">基础信息</view>

							<!-- 物料信息 -->
							<view class="filter-card">
								<view class="filter-label">物料信息</view>
								<u-input v-model="filterConfig.ProductCode" placeholder="请输入物料信息"
									suffixIcon="edit-pen-fill" />
							</view>

							<!-- 负责人 -->
							<view class="filter-card" @click="openBaseScreen('负责人','check')">
								<view class="filter-label">负责人</view>
								<view class="x-bc">
									<text>{{filterConfig.CuratorName || '请选择负责人'}}</text>
									<uni-icons type="forward" size="20" color="#999" />
								</view>
							</view>
						</view>

						<!-- 时间分组 -->
						<view class="filter-group">
							<view class="filter-title">时间范围</view>

							<!-- 单据日期 -->
							<view class="filter-card">
								<view class="filter-label">单据日期</view>
								<m-date-time :InitData="filterConfig.DropDowmMenu_Date" backgroundColor="#fff"
									titleNameColor="#333" @DateSubmit="DateSubmit" />
							</view>

							<!-- 截止日期 -->
							<view class="filter-card">
								<view class="filter-label">截止日期</view>
								<view class="x-f">
									<button class="date-btn" @click="openSelectDateTime">
										{{filterConfig.deadlineDate || '点击选择截止日期'}}
									</button>
									<uni-icons type="close" size="30" @click="cleanSelectDate" />
								</view>
							</view>
						</view>

						<!-- 其他条件 -->
						<view class="filter-group">
							<view class="filter-title">其他条件</view>

							<!-- 是否超时 -->
							<view class="filter-card">
								<view class="filter-label">是否超时</view>
								<m-radio :options="radioOptions" v-model="filterConfig.Timeout" borderRadius="9999px"
									contentActiveColor="#e1f7f8" contentActiveTextColor="#51d0d0"
									:formtData="{ showText: 'content', hidKey: 'id' }" shape="square" fontSize="14px"
									@change="handleRadioChange" />
							</view>
						</view>
					</view>

					<!-- 底部按钮区域 -->
					<view class="x-bc filterPopup-bottom" :style="$utils.disposeSafeBottomFun()">
						<button @click="resetBtn" class="filter-btn ghost">重置</button>
						<button @click="submitBtn" class="filter-btn primary">确认</button>
					</view>
				</view>
			</uni-popup>


			<!-- 温馨提示 -->
			<uni-popup ref="tipsPopup" background-color="#fff" borderRadius="20px 20px 20px 20px"
				:is-mask-click="false">
				<view class="f-dc"
					style="height: 300px;width: 80vw;overflow: hidden;border-radius: 20px;max-width: 800rpx;">
					<u-navbar :fixed="false" :safeAreaInsetTop="false" style="width: 100%;">
						<template #left>
							<view>
								<text style="font-weight: 600;color: #fff;">温馨提示</text>
							</view>
						</template>
						<view slot="right">
							<u-icon name="close" color="#fff" size="20" @click="closeTipsBtn"></u-icon>
						</view>
					</u-navbar>


					<view class="flex-auto" style="background-color: #f4f9ff;padding: 10rpx;">
						<view class="x-f" style="flex-wrap: wrap;margin-bottom: 2rpx;" v-for="(item,index) in tipsInfo"
							:key="index">
							<text style="font-weight: 600;color: #2f4677;">{{item.title}}</text>
							<view v-for="(row,ind) in item.nood" :key="ind">
								<text style="color: #60729d;margin-left: 10rpx;">{{row.label}}</text>
								<text style="color: #ff0000;font-weight: 600;">{{row.value}}</text>
								<text style="color: #84a2d6;margin-left: 6rpx;">{{row.unit}}</text>
							</view>
						</view>
					</view>
				</view>
			</uni-popup>


			<!-- 时间选择器 -->

			<u-datetime-picker :show="showDateTimePicker" v-model="defaultData.choiceTime" mode="date"
				closeOnClickOverlay @confirm="timeChange" @cancel="cancelTimePicker" @close="cancelTimePicker"
				:formatter="formatter"></u-datetime-picker>
		</view>
	</view>
</template>

<script>
	const open = uni.requireNativePlugin("Html5App-openFile");
	// 实验室报告页面
	export default {
		data() {
			return {
				pageConfig: {
					safeTop: 0,
				},
				stickShow: false,
				BtnShow: false, // 悬浮按钮--温馨提示
				tipsInfo: [{
						title: "订单管理",
						nood: [{
							label: "已出报告（待上传）：",
							value: "136",
							unit: "条"
						}, {
							label: "检测任务被退回：",
							value: "1149",
							unit: "条"
						}]
					},
					{
						title: "任务分工",
						nood: [{
							label: "待分工：",
							value: "4",
							unit: "条"
						}, {
							label: "被退回：",
							value: "1",
							unit: "条"
						}, {
							label: "已超期：",
							value: "5",
							unit: "条"
						}]
					},
					{
						title: "个人任务",
						nood: [{
							label: "待检测：",
							value: "5",
							unit: "条"
						}, {
							label: "已超期：",
							value: "5",
							unit: "条"
						}]
					},
				],

				currentIndex: 0,
				tabList: [{
					name: '全部',
					value: -1
				}, {
					name: '待检验',
					value: 0
				}, {
					name: '已检未审',
					value: 1
				}, {
					name: '已审核',
					value: 2
				}],
				radioOptions: [{
					content: '全部',
					id: -1,
				}, {
					content: '未超时',
					id: 0,
				}, {
					content: '超时',
					id: 1,
				}],

				tableData: [],

				filterConfig: {
					SearchKey: "", // 搜索框
					currentIndex: 0, // 单据状态
					ProductCode: "", // 产品信息
					Curator: '', // 负责人
					CuratorData: [], // 负责人
					CuratorName: "",

					Timeout: -1, // 是否超时
					// 时间筛选参数
					DropDowmMenu_Date: {
						DateTitle: "",
						SDate: "",
						EDate: "",
					},
					deadlineDate: "", // 截止日期
				},
				showDateTimePicker: false, // 时间选择器

				// 时间单选组件
				defaultData: {
					choiceTime: ''
				},
				minDate: {
					year: 1970,
					month: 1,
					date: 1
				},
				maxDate: {
					year: 2099,
					month: 12,
					date: 31
				},
			};
		},
		onLoad() {
			let safeTop = uni.getSystemInfoSync().safeArea.top;
			this.$set(this.pageConfig, 'safeTop', safeTop)
		},
		mounted() {
			var that = this;

			that.$nextTick(() => {
				setTimeout(() => {
					that.BtnShow = true;
				}, 500)
			});

			uni.$on("refreshToLabReport_list", function(ret) {
				that.OnSearch();
			})

			uni.$on("experimentResult_select", function(ret) {
				console.log(ret);
				switch (ret.type) {
					case '负责人':
						console.log(ret.data);
						let CuratorArr = [],
							CuratorNameArr = [];

						that.filterConfig.CuratorData = ret.data;
						that.$set(that.filterConfig, "CuratorData", ret.data);

						ret.data.forEach(({
							EmplID,
							EmplName
						}) => {
							CuratorArr.push(EmplID);
							CuratorNameArr.push(EmplName);
						});

						Object.assign(that.filterConfig, {
							Curator: CuratorArr.join(','),
							CuratorName: CuratorNameArr.join(',')
						});

						break;
					default:
						break;
				}
			})
		},
		onUnload() {
			uni.$off("experimentResult_select");
			uni.$off("refreshToLabReport_list");
		},
		methods: {
			OnSearch() { // 搜索
				this.$refs.paging.reload();
			},
			// 筛选
			DateSubmit(data) { // 时间筛选--时间选择
				// this.filterConfig.DropDowmMenu_Date = this.$utils.deepClone(data);
				this.$set(this.filterConfig, 'DropDowmMenu_Date', this.$utils.deepClone(data));
				// this.$refs.paging.reload();
			},

			// 映射
			backIconByType(type) {
				let obj;
				switch (type) {
					// case 0: // 终止
					// 	obj = {
					// 		icon: "&#xe611;",
					// 		color: "#d81e06"
					// 	};
					// 	break;
					case 1: // 成功
						obj = {
							icon: "&#xe619;",
							color: "#3ed180"
						};
						break;
					case 0: // 等待
						obj = {
							icon: "&#xe612;",
							color: "#ef6b33"
						};
						break;
					default:
						obj = {
							icon: "&#xe612;",
							color: "#ef6b33"
							// icon: "&#xe76b;",
							// color: "#4a90e2"
						};
						break;
				};
				return obj;
			},
			formatter(type, value) { // u-datetime-picker 时间映射
				if (type === 'year') {
					return `${value}年`
				}
				if (type === 'month') {
					return `${value}月`
				}
				if (type === 'day') {
					return `${value}日`
				}
				return value
			},

			// 取值
			queryList(pageNo) {
				let that = this;
				that.$utils.showLoading('正在加载...');

				// let BillTypeID = this.filterConfig.currentIndex;
				let Approve = -1,
					SFJY = -1;
				switch (this.filterConfig.currentIndex) {
					case -1:
						Approve = -1;
						SFJY = -1;
						break;
					case 0:
						Approve = 0;
						SFJY = 0;
						break;
					case 1:
						Approve = 0;
						SFJY = 1;
						break;
					case 2:
						Approve = 1;
						SFJY = 1;
					default:
						break;
				}

				let param = {
					Approve: -1, // -1全部 0未审核 1已审核
					Curator: this.filterConfig.Curator, // 负责人
					FSDate: this.filterConfig.DropDowmMenu_Date.SDate, // 开始时间
					FEDate: this.filterConfig.DropDowmMenu_Date.EDate, // 结束时间
					SFJY: this.filterConfig.currentIndex, // -1全部 0 未检验 1已检验
					BillNO: this.filterConfig.SearchKey, // 单据编号
					ProductCode: this.filterConfig.ProductCode, // 物料信息
					TestEndTime: this.filterConfig.deadlineDate, // 截止日期
					IsDelay: this.filterConfig.Timeout, // -1全部 0未超时 1超时
					Pageindex: pageNo,
					PageSize: 30,
				};
				console.log(param);

				this.$request("Qu_LabTestSelectMainForm", param, function(ret) {
					console.log(ret);

					// 解构出 ds 和 ds2
					const {
						ds,
						ds2
					} = ret.data;

					// 创建一个映射结构，把 ds 中每项按 LabTestProductID 映射
					const dsMap = ds.reduce((map, item) => {
						map[item.LabTestProductID] = {
							...item,
							Details: []
						};
						return map;
					}, {});

					// 将 ds2 的每条数据合并进对应的 ds 条目中
					ds2.forEach(detail => {
						const parent = dsMap[detail.LabTestProductID];
						if (parent) {
							parent.Details.push(detail);
						}
					});

					// 最终结果数组
					const result = Object.values(dsMap).map(item => {
						// 计算 Delay 字段（截止日期 - 当前日期）
						if (item.TestEndTime) {
							const today = new Date();
							const endDate = new Date(item.TestEndTime);
							const delay = Math.floor((today - endDate) / (1000 * 60 * 60 * 24)); // 天数差
							item.Delay = delay; // 正数 = 超期，负数 = 剩余
						} else {
							item.Delay = null;
						}
						return item;
					});

					console.log(result);
					that.$refs.paging.complete(result);
					that.$utils.hideLoading();
				}, function(err) {
					console.log(err);

				});
			},
			buildTree(data, rootVal = 0) {
				const map = new Map(),
					tree = [];
				for (const item of data) map.set(item.id, {
					...item
				});
				for (const item of data) {
					const node = map.get(item.id);
					const parent = map.get(item.UpID);
					if (item.UpID === rootVal) tree.push(node);
					else if (parent) {
						parent.children = parent.children || [];
						parent.children.push(node);
					}
				}
				return tree;
			},

			// 事件
			submitBtn() { // 筛选提交
				this.$refs.filterPopup.close();
				this.$refs.paging.reload();
			},
			resetBtn() { // 重置按钮
				let obj = {
					ProductCode: "", // 产品信息
					Curator: '', // 负责人
					CuratorData: [], // 负责人
					CuratorName: "",

					Timeout: -1, // 是否超时
					// 时间筛选参数
					DropDowmMenu_Date: {
						DateTitle: "",
						SDate: "",
						EDate: "",
					},
					deadlineDate: "", // 截止日期
				};
				Object.assign(this.filterConfig, obj);
				this.$refs.paging.reload();
			},
			mDropdownOpen() { // 下拉框打开时触发
				this.stickShow = false;
			},
			openTipsBtn() { // 打开悬浮按钮 -- 温馨提示
				console.log(1111);
				let that = this;

				this.$refs.filterPopup.close();
				that.$refs.tipsPopup.open();
			},
			closeTipsBtn() { // 关闭悬浮按钮--温馨提示
				let that = this;

				that.$refs.tipsPopup.close();
			},
			addTaskBtn() { // 新建任务
				let that = this;
				uni.navigateTo({
					url: "/st_qms/LabReport/creatTaskInfo"
				})
			},
			innerCellClick(item, index) { // 点击列表项
				console.log(item);
				uni.navigateTo({
					url: "./experimentResultInfo" + "?LabTestProductID=" + item.LabTestProductID
				})
			},
			evalJs(data) { // 向html中传入值，之后看看能不能封装一下
				var that = this;
				try {
					let currentWebview = that.$scope.$getAppWebview().children()[0];
					currentWebview.evalJS(`vm.setRange('${data}')`)
				} catch (e) {
					//TODO handle the exception
				}
			},
			tabsChange(item) { // 切换分段器
				var that = this;
				this.filterConfig.currentIndex = item.data.value;
				that.$utils.showLoading();

				that.TabTimer = setTimeout(() => {
					that.$refs.paging.reload();
				}, 300)
			},
			openFilter() { // 打开筛选弹窗
				this.$refs.filterPopup.open();

			},
			handleRadioChange(data) { // 切换是否超时选项

				this.$set(this.filterConfig, 'Timeout', this.$utils.deepClone(data.data.id));
			},
			openSelectDateTime() { // 打开时间弹层
				let that = this;
				let nowTime = new Date();
				if (!this.$utils.isEmpty(this.filterConfig.deadlineDate)) {
					nowTime = new Date(this.filterConfig.deadlineDate);
				};

				that.$set(that.defaultData, "choiceTime", +nowTime);
				console.log(that.defaultData);
				that.showDateTimePicker = true;

			},
			timeChange(data) { // 时间选择--点击确认
				let that = this;
				console.log(data);
				that.$set(that.filterConfig, "deadlineDate", that.$utils.dateFormat(new Date(data.value), 'Y-MM-dd'));

				that.showDateTimePicker = false;
			},
			cancelTimePicker() { // 点击取消
				let that = this;

				that.showDateTimePicker = false;
			},
			cleanSelectDate() { // 清除时间
				let that = this;
				that.$set(that.filterConfig, "deadlineDate", "");

			},
			GoBack() {
				uni.navigateBack()
			},
			openBaseScreen(str, type) {
				let that = this;
				let obj = {};
				let url = "";

				switch (type) {
					case 'check':
						url = '/commonPage/Tool/SelectBaseScreen';

						switch (str) {
							case '负责人':
								obj = {
									allowClear: false,
									cmd: 'XGD_Employee',
									type: str,
									ListeningName: 'experimentResult_select',
									// multiple: false,
									serverSearch: {
										isPaging: true, //是否分页
										searchKey: 'EmplCode', //搜索关键词，应包含在param中
										showText: 'EmplName', //查询结果显示的字段
										pageIndexStr: 'Pageindex', //分页页码字段，应包含在param中
										subText: [{
											label: '编号',
											labelKey: 'EmplCode'
										}],
										ChoiceDataKey: 'EmplID',
										ChoiceDataData: that.filterConfig.CuratorData,
									},
									param: {
										EmplCode: '',
										Pageindex: 1,
										PageSize: 30
									}
								}
								break;
							default:
								break;
						}



						break;
					default:
						break;
				};

				if (url != '') {

					this.$store.commit('ChangeAndSetStateData', {
						Name1: 'BaseScreenParm',
						data: obj
					})

					uni.navigateTo({
						url: url,
						fail(err) {
							console.log(err)
						}
					})
				}

			},
		},
	}
</script>

<style lang="scss" scoped>
	* {
		padding: 0;
		margin: 0;
		box-sizing: border-box;
	}

	.content {
		.SearchBox {
			background-color: #fff;
			background-color: #51d0d0;
			padding: 6px 10px;

			.MenuText {
				font-size: 14px;
				border-right: 1px solid #999;
				padding-right: 10px;
				margin-right: 4px;
			}
		}

		// 顶部tab栏
		.TabsBox {
			padding: 10px 15px;
			background-color: #fff;
			border-bottom: 2px solid #eee;

			.u-tabs__wrapper__nav__item__text {
				padding: 4px 10px !important;
			}

			.IconBoxs {
				border-left: 1px solid #d1d1d1;
			}
		}

		.CardBox {
			margin: 15rpx;
			background-color: #fff;
			border-radius: 12rpx;
			padding-bottom: 10rpx;

			&__top {
				padding: 10px;
				border-bottom: 2px solid #a6a6a6;
				font-size: 14px;
			}

			&__content {

				&-cell {
					padding: 8rpx 16rpx;
					font-size: 12px;
					border-bottom: 1px solid #f9f9f9;
				}
			}
		}

		.lab-card {
			background-color: #fff;
			border-radius: 20rpx;
			box-shadow: 0 6rpx 12rpx rgba(0, 0, 0, 0.05);
			padding: 24rpx;
			margin: 20rpx 16rpx;
			display: flex;
			flex-direction: column;
			gap: 20rpx;
			border-left: 8rpx solid #4b8df8;
			transition: transform 0.2s;

			&:active {
				transform: scale(0.98);
			}

			.lab-card__top {
				display: flex;
				justify-content: space-between;
				align-items: center;

				.top-left {
					display: flex;
					align-items: center;
					gap: 12rpx;

					.index {
						font-size: 26rpx;
						font-weight: bold;
						color: #4b8df8;
					}

					.bill-no {
						font-size: 28rpx;
						font-weight: 600;
						color: #1f2d3d;
						background-color: #eaf1ff;
						padding: 2rpx 8rpx;
						border-radius: 8rpx;
					}
				}

				.bill-date {
					font-size: 24rpx;
					color: #999;
				}
			}

			.product-info {
				font-size: 24rpx;
				color: #333;
				background-color: #eef4fc;
				padding: 16rpx;
				border-radius: 12rpx;
				display: flex;
				flex-direction: column;
				gap: 6rpx;
				line-height: 1.6;

				.x-f {
					display: flex;
					font-size: 24rpx;
					color: #666;

					view {
						display: flex;
						align-items: center;
					}
				}
			}

			.deadline-info {
				display: flex;
				justify-content: space-between;
				align-items: center;
				background-color: #fffbe8;
				border: 1px dashed #f1c40f;
				padding: 12rpx;
				border-radius: 8rpx;
				font-size: 24rpx;

				.deadline-text {
					color: #7a7a7a;
				}

				.deadline-status {
					font-weight: bold;
				}

				.overdue {
					color: #e74c3c;
				}

				.normal {
					color: #2ecc71;
				}
			}

			.content-list {
				display: flex;
				flex-direction: column;
				gap: 10rpx;
				padding: 12rpx 0;

				.content-row {
					display: flex;
					justify-content: space-between;
					align-items: center;

					.content-text {
						font-size: 24rpx;
						color: #444;
						flex: 1;
						white-space: nowrap;
						overflow: hidden;
						text-overflow: ellipsis;
					}

					.content-icon {
						margin-left: 12rpx;
						opacity: 0.75;
						font-size: 26rpx;
					}
				}
			}

			.card-footer {
				display: flex;
				justify-content: flex-end;
				font-size: 24rpx;
				color: #666;
				border-top: 1px solid #eee;
				padding-top: 10rpx;

				.footer-name {
					font-weight: 600;
					color: #2c3e50;
					margin-left: 6rpx;
				}
			}
		}


		// 筛选弹层
		.filterPopup {
			height: 100vh;
			max-width: 500px;
			width: 80vw;
		}

		.filter-group {
			padding: 0 30rpx;
			margin-bottom: 30rpx;
		}

		.filter-title {
			font-size: 28rpx;
			font-weight: bold;
			margin-bottom: 20rpx;
			color: #333;
		}

		.filter-card {
			background-color: #fff;
			border-radius: 16rpx;
			padding: 24rpx;
			box-shadow: 0 4rpx 8rpx rgba(0, 0, 0, 0.05);
			margin-bottom: 20rpx;
		}

		.filter-label {
			font-size: 26rpx;
			margin-bottom: 12rpx;
			color: #666;
			font-weight: 500;
		}

		.date-btn {
			font-size: 26rpx;
			background-color: #f5f5f5;
			border-radius: 12rpx;
			padding: 10rpx 20rpx;
			flex: 1;
			text-align: left;
		}

		.filterPopup-bottom {
			padding: 15rpx;
			background-color: #fff;
			box-shadow: 1px 1px 13px -7px #999;
			border-radius: 0 0 0 12rpx;

			.filter-btn {
				flex: 1;
				margin: 0 12rpx;
				// border-radius: 16rpx;
				// padding: 20rpx 0;
				// font-size: 28rpx;
			}

			.filter-btn.ghost {
				background-color: #fff;
				border: 1px solid #ccc;
				color: #333;
			}

			.filter-btn.primary {
				background-color: #51d0d0;
				color: #fff;
				border: none;
			}
		}
	}
</style>